<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        v-model
            预期：随表单控件类型不同而不同。
            限制：<input>、<select>、<textarea>、components
            修饰符：
                .lazy - 取代 input 监听 change 事件
                .number - 输入字符串转为有效的数字
                .trim - 输入首尾空格过滤
            用法：
                在表单控件或者组件上创建双向绑定
     -->
     <!-- 
        v-bind
            缩写：:
            预期：any (with argument) | Object (without argument)
            参数：attrOrProp (optional)
            修饰符：
                .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
                .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
                .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
            用法：
            动态地绑定一个或多个 attribute，或一个组件 prop 到表达式
      -->

      <!-- 

        Vue中数据的绑定方式有两种：
            单向绑定(v-bind)：数据只能从data流向页面
            双向绑定(d-model)：数据不仅能从data流向页面还能从页面流向data
            双向绑定一般用在表单类元素上
            v-model:value可以简写为v-mode，因为v-modl默认收集的就是value值

       -->
    <div id="app">
        <!-- 普通写法 -->
        <div>
            <label for="inout1">单向数据绑定</label><input type="text" id="inout1" v-bind:value="value1">
        </div>
        <div>
            <label for="inout2">双向数据绑定</label><input type="text" id="inout2" v-model:value="value2">
        </div>
        <!-- 简写 -->
        <div>
            <label for="inout1">单向数据绑定</label><input type="text" id="inout1" :value="value1">
        </div>
        <div>
            <label for="inout2">双向数据绑定</label><input type="text" id="inout2" v-model="value2">
        </div>
    </div>
    <script src="../JavaScript/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                value1: "你好黑马程序员",
                value2: "你好尚硅谷",
            }
        })
    </script>

</body>

</html>